<template>
  <div class="p-4">
    <div class="md:flex enter-y">
      <LinePanel
        class="md:w-1/4 w-full"
        :title="t('routes.dailyTask.pages.step')"
        :lineData="stepsData"
        :loading="panelLoading.sleepLoading"
      />
      <PiePanel
        class="md:w-1/4 !md:mx-4 !md:my-0 !my-4 w-full"
        :title="t('routes.dailyTask.pages.sleep')"
        :loading="panelLoading.sleepLoading"
        :pieData="sleepData"
      />
      <LinePanel
        class="md:w-1/4 w-full"
        :topColor="'#ec5468'"
        :bottomColor="'#efa19e'"
        :title="t('routes.dailyTask.pages.exerciseTimes')"
        :lineData="exerciseData"
        :loading="panelLoading.exerciseLoading"
      />
      <LiquidFillPanel
        class="md:w-1/4 !md:mx-4 !md:my-0 !my-4 w-full"
        :title="t('routes.dailyTask.pages.drink')"
        :loading="panelLoading.dringingLoading"
        :width="'200px'"
        :height="'200px'"
        :margin="'40px auto'"
        :drinkingData="drinkingData"
        @complete-updata="completeUpdata"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive } from 'vue'
  import LinePanel from './components/LinePanel.vue'
  import PiePanel from './components/PiePanel.vue'
  import LiquidFillPanel from './components/LiquidFillPanel.vue'
  import { useI18n } from '/@/hooks/web/useI18n'
  import { statisticsTask, statisticsDetailsTask } from '/@/api/dailyTask/task'
  import { lineTaskObjModel, pieTaskObjModel } from '/@/api/dailyTask/model/taskModel'
  const { t } = useI18n()

  const panelLoading = reactive({
    stepLoading: true,
    sleepLoading: true,
    exerciseLoading: true,
    dringingLoading: true,
  })

  onMounted(async () => {
    // 步数数据
    getStepsData()

    //睡眠数据
    getSleepData()

    // 运动数据
    getExerciseData()

    // 喝水数据
    getDrinkingData()
  })

  // 获取步数数据
  const stepsData = reactive<lineTaskObjModel>({
    timeData: [],
    valueData: [],
    unit: '',
  })
  const getStepsData = async () => {
    try {
      const res = (await statisticsTask({ taskId: 9 })).data

      stepsData.timeData = res.timeData
      stepsData.valueData = res.valueData
      stepsData.unit = res.unit
      panelLoading.stepLoading = false
    } catch (e) {
      panelLoading.stepLoading = false
      console.log(e)
    }
  }

  // 获取运动时间数据
  const exerciseData = reactive<lineTaskObjModel>({
    timeData: [],
    valueData: [],
    unit: '',
  })
  const getExerciseData = async () => {
    try {
      const res = (await statisticsTask({ taskId: 12 })).data
      exerciseData.timeData = res.timeData
      exerciseData.valueData = res.valueData
      exerciseData.unit = res.unit
      panelLoading.exerciseLoading = false
    } catch (e) {
      panelLoading.exerciseLoading = false
      console.log(e)
    }
  }

  // 获取喝水数据
  const drinkingData = reactive<pieTaskObjModel>({
    currentValue: 0,
    targetValue: 0,
    unit: '',
  })
  const getDrinkingData = async () => {
    try {
      const res = (await statisticsDetailsTask({ taskId: 10 })).data
      drinkingData.currentValue = res.currentValue
      drinkingData.targetValue = res.targetValue
      drinkingData.unit = res.unit
      panelLoading.dringingLoading = false
    } catch (e) {
      panelLoading.dringingLoading = false
      console.log(e)
    }
  }

  // 获取睡眠数据
  const sleepData = reactive<pieTaskObjModel>({
    currentValue: 0,
    targetValue: 0,
    unit: '',
  })
  const getSleepData = async () => {
    try {
      const res = (await statisticsDetailsTask({ taskId: 11 })).data
      sleepData.currentValue = res.currentValue
      sleepData.targetValue = res.targetValue
      sleepData.unit = res.unit
      panelLoading.sleepLoading = false
    } catch (e) {
      panelLoading.sleepLoading = false
      console.log(e)
    }
  }

  //完成更新
  const completeUpdata = () => {
    getDrinkingData()
  }
</script>
